<template>
    <a-dropdown :trigger="['click']">
    <a class="ant-dropdown-link" @click.prevent>
        <a-avatar class="">
            <template #icon><UserOutlined /></template>
        </a-avatar> 
       <span class="user-name">{{ name }}</span> <DownOutlined />
    </a>
    <template #overlay>
      <a-menu class="header-menu">
        <a-menu-item class="header-menu-item" v-for="item in menuItem" :key="item.key" @click="item.action">
         {{ item.name }}
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { DownOutlined, UserOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { GlobalState } from '@/store/index';

const store = GlobalState();
const name = ref('')
interface MenuItemType {
    name: string;
    key: number;
    action: unknown;
}
const router = useRouter()
//修改密码
const changePassword = ()=> {
    console.log('修改密码')
}
//退出
const signOut = ()=> {
    window.sessionStorage.clear();
    router.push('/login')
}
const menuItem: Array<MenuItemType> = [
    {
        key: 1,
        name: '退出',
        action: signOut
    }
]
//获取用户信息
name.value = store.userInfo.username

</script>

<style lang="less" scoped>
:deep(.header-menu) {
    background-color: @body-background;
    &-item {
    font-size: 12px;
}
}
.user-name {
    margin: 0 4px;
}

</style>